import * as React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import config from '../../utils/config';
// 加载Form组件
import LoginForm from '../../components/Views/Login/LoginForm';
// model相关
import { namespace as loginNs, Action as loginAction } from '../../models/login';
// css
const styles = require('./index.less');
// config
const { logo, name } = config;

// 定义界面属性接口，验证属性参数类型
interface PageProps {
  dispatch: Function;
  login: any;
  loading: any;
};

// 定义界面状态接口，验证状态参数类型
interface PageStates { };

// 定义界面状态接口，验证状态参数类型interface PageStates { };

// 定义提交的对象
interface LoginParams {
  username: string,
  password: string
};

// 使用stateless component
const Page: React.StatelessComponent<PageProps> = ({ dispatch, login, loading }) => {
  function doLogin(values: LoginParams) {
    // 更新
    dispatch({
      type: `${loginNs}/${loginAction.login}`,
      payload: values
    });
  }
  return (
      <div className={styles.form}>
        <div className={styles.logo}>
          <img alt={'logo'} src={logo} />
          <span>{config.name}</span>
        </div>
        <LoginForm
          onSubmit={doLogin}
        />
      </div>
  )
};

export default connect(({login, loading}) => ({login, loading}))(Page);
